<template>
    <section>
        <el-row :gutter="20">
            <el-col :span="4">
                <el-input
                        v-permission="installPermissions.permissions.task.list"
                        placeholder="请输入搜索关键词"
                        v-model="searchParams.key"
                        prefix-icon="fa fa-search"
                >
                    <div slot="append">
                        <el-button
                                type="primary"
                                icon="fa fa-search"
                                @click=" pager.pager.pageNumber = 1 ;doSearch()"
                        />
                    </div>
                </el-input>
            </el-col>
            <el-col
                    :span="4"
                    :offset="12"
            >
                <el-button
                        v-permission="installPermissions.permissions.task.add"
                        type="primary"
                        size="small"
                        @click="handleEdit({id:0})"
                        icon="el-icon-plus"
                >
                    添加任务
                </el-button>
            </el-col>
        </el-row>
        <egrid
                class="egrid"
                stripe
                border
                @row-dblclick="goDetail"
                :data="pager.dataList"
                :columns="columns"
        />
        <el-row>
            <el-col
                    :span="6"
                    :offset="18"
            >
                <el-pagination
                        style="float:right"
                        layout="prev, pager, next"
                        :total="pager.pager.recordCount"
                        :page-size="pager.pager.pageSize"
                        :current-page.sync="pager.pager.pageNumber"
                        v-show="pager.pager.pageCount != 0"
                        @current-change="changePage"
                />
            </el-col>
        </el-row>

        <!-- 添加和编辑弹出框 -->
        <AddAndEdit
                v-model="addAndEditValue"
                @on-show-change="addAndEditDone"
        />
        <Publish
                v-model="publishValue"
                @on-show-change="publishDone"
        />
    </section>
</template>
<style>
</style>
<script>
    import AddAndEdit from "./AddAndEdit";
    import Ops from "./ops.vue";
    import Publish from "./publish";

    export default {
        components: {
            AddAndEdit,
            Publish
        },
        data() {
            return {
                searchParams: {
                    organizationIds: [],
                    key: ""
                },
                defaultProps: {
                    children: "sub",
                    value: "id",
                    label: "name"
                },
                organizations: [],
                grantValue: {
                    id: 0,
                    show: false
                },
                resetValue: {
                    id: 0,
                    show: false
                },
                addAndEditValue: {
                    show: false,
                    template: { id: 0 }
                },
                publishValue: {
                    show: false,
                    template: { id: 0 }
                },
                powerInfo: {
                    selectedIds: [],
                    userId: 0
                },
                powerShow: false,
                permissions: [],
                roles: [],
                columns: [
                    { label: "ID", width: "55", align: "center", prop: "id" },
                    {
                        label: "名称",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "name"
                    },
                    {
                        label: "分类",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "templateSortName",
                        propsHandler: function({ row, col, column }) {
                            row.templateSortName = row.templateSort
                                ? row.templateSort.name
                                : "";
                            return { row, col, column };
                        }
                    },
                    {
                        label: "类型",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "taskTypeName",
                        propsHandler: function({ row, col, column }) {
                            row.taskTypeName = row.taskType
                                ? row.taskType.name
                                : "暂无";
                            return { row, col, column };
                        }
                    },
                    {
                        label: "开始时间",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "startTime"
                    },
                    {
                        label: "结束时间",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "endTime"
                    },
                    {
                        label: "操作",
                        align: "center",
                        component: Ops,
                        listeners: {
                            deleteDone: this.loadData,
                            // resetShow: this.handleReset,
                            editRow: this.handleEdit,
                            publishRow: this.publish
                            // roleShow: this.handleRole,
                            // permissionShow: this.handlePermission
                        }
                    }
                ],
                applications: [],
                pager: {
                    dataList: [],
                    pager: {
                        pageCount: 0,
                        pageNumber: 1,
                        pageSize: 15,
                        recordCount: 0
                    },
                    paras: {
                        key: ""
                    }
                }
            };
        },
        methods: {
            doSearch() {
                window.setTimeout(() => {
                    this.$api.template.search(
                        this.searchParams.key,
                        this.pager.pager.pageNumber,
                        result => {
                            this.pager = result.pager;
                        }
                    );
                }, 100);
            },
            changePage() {
                if (this.searchParams.key) {
                    this.doSearch();
                } else {
                    this.loadData();
                }
            },
            handleEdit(row) {
                this.addAndEditValue = { show: true, template: {id:row.id} };
            },
            publish(row) {
                this.publishValue = { show: true, template: this.$clone(row) };
            },
            publishDone(data) {
                this.publishValue.show = data.visible;
                this.changePage();
            },
            addAndEditDone(data) {
                this.addAndEditValue.show = data.visible;
                this.changePage();
            },
            loadData() {
                this.$api.template.list(this.pager.pager.pageNumber, result => {
                    console.log(result.pager);
                    this.pager = result.pager;
                });
            },
            loadTree() {
                // this.$api.organization.tree(0, false, result => {
                //   this.organizations = result.tree || [];
                // });
            },
            goDetail(row){
                this.$router.push({path: "/template/detail", query: {templateId: row.id}})
            },
            loadApplications() {
                this.$api.application.all(result => {
                    this.applications = result.applications;
                });
            }
        },
        created() {
            this.loadData();
            // this.loadTree();
            // this.loadApplications();
        },
        watch: {
            searchParams: {
                handler() {
                    if (this.searchParams.organizationIds) {
                        this.searchParams.organizationId = this.searchParams.organizationIds[
                        this.searchParams.organizationIds.length - 1
                            ];
                    } else {
                        this.searchParams.organizationId = null;
                    }
                },
                immediate: true,
                deep: true
            }
        }
    };
</script>